<template>
	<view>
		<scroll-view class="form">
			<view class="text-card">
				<view class="card-row card-row1">
					<view class="row-content title">
						{{form.title}}
					</view>
				</view>
				<view class="card-row card-row1">
					<view class="row-label w30">评审内容</view>
					<view class="row-content w70">
						{{form.content}}
					</view>
				</view>
				<view class="card-row card-row1">
					<view class="row-label w30">评审日期</view>
					<view class="row-content w70">
						{{form.assessStartDate}} ~ {{form.assessEndDate}}
					</view>
				</view>
				<view class="card-row card-row1">
					<view class="row-label w30">具体时间</view>
					<view class="row-content w70">
						{{form.assessTime}}
					</view>
				</view>
				<view class="card-row card-row1">
					<view class="row-label w30">评审预估时长</view>
					<view class="row-content w70">
						{{form.assessDuration}}
					</view>
				</view>
				<view class="card-row card-row1">
					<view class="row-label w30">评审人数</view>
					<view class="row-content w70">
						{{form.enrollNumber}} / {{form.assessorNumber}}
					</view>
				</view>
				<view class="">
					<button type="default" disabled="true" v-if="form.status == '1'">已关闭</button>
					<button type="default" disabled="true" v-else-if="enrolled">已报名</button>
					<button type="default" disabled="true" v-else-if="fulled">名额已满</button>
					<button type="primary" @click="submit" v-else>报名</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				enrolled: false,  // 是否已报名
				fulled: false,  // 是否名额已满
				form: {},
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getInfo()
		},
		methods: {
			getInfo(){
				let data = {
					id: this.id,
					expertId: vk.getVuex('$user.userInfo.userId'),
				}
				this.$util.request(this.$api.EnrollInfo, data, null, null, null, null, null, () => this.getInfo())
					.then(res => {
						this.form = res.data;
						if(this.form.status == '0'){
							if(this.form.expertId == vk.getVuex('$user.userInfo.userId')){
								this.enrolled = true;
							}
							else if(this.form.enrollNumber >= this.form.assessorNumber){
								this.fulled = true;
							}
						}
					})
					.catch(err => console.log('报名详情异常', err))
			},
			submit(){
				// 重新查询报名人数
				let data = {
					id: this.id,
					expertId: vk.getVuex('$user.userInfo.userId'),
				}
				this.$util.request(this.$api.EnrollInfo, data, null, null, null, null, null, () => this.submit())
					.then(res => {
						this.form = res.data;
						if(this.form.status == '1'){
							uni.showModal({
								title: '已关闭',
								showCancel: false
							})
							return false;
						}
						else if(this.form.enrollNumber >= this.form.assessorNumber){
							this.fulled = true;
							uni.showModal({
								title: '报名人数已满',
								showCancel: false
							})
							return false;
						}else{
							this.enroll();
						}
					})
					.catch(err => console.log('报名详情异常', err))
			},
			enroll(){
				let data = {
					id: this.id,
					expertId: vk.getVuex('$user.userInfo.userId'),
				}
				this.$util.request(this.$api.EnrollRestful, data, 'PUT', null, null, null, null, () => this.enroll())
					.then(res => {
						if(res.code === 200){
							vk.toast("报名成功", "success", 1000, true, () => {
								const eventChannel = this.getOpenerEventChannel();
								if (eventChannel.emit) eventChannel.emit('refresh');
								vk.navigateBack();
							});
						}else{
							uni.showModal({
								title: '报名失败。' + res.msg,
								showCancel: false
							})
						}
					})
					.catch(err => console.log('报名异常', err))
			}
		}
	}
</script>

<style>
	@import url("/static/css/main.css");
	.m-tag{
		position: absolute;
		top: 30px;
		bottom: 20px;
		left: 0upx;
		right: 0upx;
		margin: auto;
		width: 150upx;
		transform: rotate(15deg);
		letter-spacing: 10px;
		font-weight: 700;
	}
	.text-card{
		position: relative;
		font-size: 1.2em;
	}
	.card-row {
		border-bottom: solid 1upx #007AFF;
		align-items: center;
		padding: 10upx 20upx 20upx;
	}
	.row-content image {
		width: 150upx;
		height: 150upx;
	}
	.card-row1{
		padding: 20upx 20upx 30upx;
	}
	button{
		width: 100%;
	}
	.empty-line{
		height: 100upx;
	}
	.title{
		width: 100%;
		text-align: center;
		font-weight: 700;
	}
</style>
